<template>
  <div>
    <div class="absolute w23 top-pos" style="overflow: hidden">
      <div class="left_top relative m1-size m1-pos">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon4.png" />党支部党员统计
        </div>
        <dv-scroll-ranking-board
          :config="parterRank"
          style="width: 433px; height: 440px"
        />
      </div>
    </div>
    <div class="map-size map-pos absolute">
      <div class="center_top relative">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page1/icon3.png" />金村村地图
        </div>
        <div id="center_map">
          <ul>
            <span class="open qianlan">开</span>
            <li class="tiao">
              <span class="open_btn"></span>
              <span class="off_btn"></span>
            </li>
            <span class="off qianlan">关</span>
          </ul>
        </div>
      </div>
    </div>
    <div class="mp3-size mp3-pos absolute">
      <div class="back relative">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page2/icon3.png" />党建概览
        </div>
        <div class="data_sqgl" style="margin-top: 40px">
          <div class="data_box">
            <font class="font shenlan" face="font01">{{
              partyBaseInformation.branchesNo
            }}</font
            ><span>个</span>
            <div class="data_title2">支部个数</div>
          </div>
          <div class="data_box">
            <font class="font zise" face="font01">{{
              partyBaseInformation.totalPartyNo
            }}</font
            ><span>人</span>
            <div class="data_title2">党员总数</div>
          </div>
        </div>
        <span class="line"></span>
        <div class="data_sqgl">
          <div class="data_box">
            <font class="font qianlan" face="font01">{{
              partyBaseInformation.totalPartyPay
            }}</font
            ><span>元</span>
            <div class="data_title2">党费交纳总额</div>
          </div>
          <div class="data_box">
            <font class="font huangse" face="font01">{{
              partyBaseInformation.averagePartyAge
            }}</font
            ><span>岁</span>
            <div class="data_title2">平均党龄</div>
          </div>
        </div>
        <span class="line"></span>
        <font class="font_1" face="font01"> 党员发展情况 </font>
        <div
          ref="partyMemberDevelopment"
          style="width: 100%; height: 557px; margin-top: 20px"
        ></div>
      </div>
    </div>
    <!-- 学历性别统计 -->
    <div class="rS-size rS-pos absolute">
      <div class="p2_rS relative">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page2/icon3.png" />党员学历情况
        </div>
        <div ref="educationChart" style="width: 100%; height: 89%"></div>
      </div>
    </div>
    <!-- 年份统计饼图 -->
    <div class="pie-size pie-pos absolute">
      <div class="pie_ps relative">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page2/icon3.png" />党员出生年份统计
        </div>
        <div ref="annualPopulationChart" style="width: 100%; height: 85%"></div>
      </div>
    </div>
    <!-- 男女比例 -->
    <div class="male-size male-pos absolute">
      <div class="male_ps relative">
        <span class="j_1"></span>
        <span class="j_2"></span>
        <span class="j_3"></span>
        <span class="j_4"></span>
        <div class="title">
          <img src="@/assets/img/page2/icon3.png" />男女比例
        </div>
        <div ref="maleChart" style="width: 100%; height: 85%"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { shallowRef } from "@vue/reactivity";
import AMapLoader from "@amap/amap-jsapi-loader";
import * as echarts from "echarts";
import {
  getPartyBasicInformation,
  queryPartyBranchStatistics,
  queryPartyEducationalStatistics,
  queryAnnualPopulationStatistics,
  querySexRatio,
  queryPartyMemberDevelopmentResponse,
  getAllPartyBranchList,
} from "@/api/smartpartybuilding";
export default {
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
    this.queryPartyBranchStatistics();
    this.getPartyBasicInformation();
    this.educationChart();
    this.annualPopulationStatistics();
    this.querySexRatioEchart();
    this.queryPartyMemberDevelopmentResponse();
  },
  data() {
    return {
      partyBaseInformation: {
        // 村庄名称
        villageName: "",
        // 基础组织个数
        branchesNo: 10,
        // 党员总数
        totalPartyNo: "200",
        // 交纳总党费
        totalPartyPay: 5000,
        // 平均党龄
        averageAge: 40,
        // 平均党龄
        averagePartyAge: 32,
      },
      weatherInformation: {
        // 当前时间
        nowTime: "",
        // 天气描述
        text: "",
        // 温度
        temp: "",
        // 风力等级
        windScale: "",
        // 风向
        windDir: "",
      },
      parterRank: {
        data: [],
        rowNum: 7,
        waitTime: 2000,
        carousel: "single",
        unit: "",
        sort: true,
      },
      yearStatisticsPieData: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "75%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      educationChartData: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: [
            "中央党校大学",
            "中等专科",
            "初中",
            "大专",
            "大学",
            "大学普通班",
            "普通高中",
            "硕士研究生",
          ],
        },
        series: [
          {
            name: "女",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320, 100],
          },
          {
            name: "男",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210, 100],
          },
        ],
      },
      maleOption: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "75%",
            data: [
              { value: 1048, name: "男" },
              { value: 735, name: "女" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      partyFeepaymentconfig: {
        header: ["姓名", "手机号", "金额", "交纳时间"],
        data: [["朱耀威", "189****7025", 1000, "2022-02-27"]],
        rowNum: 10,
        headerBGC: "#00BAFF",
        oddRowBGC: "#003B51",
        evenRowBGC: "#0A2732",
        waitTime: 2000,
        headerHeight: 35,
        columnWidth: [],
        align: [],
        index: true,
        indexHeader: "#",
        carousel: "single",
        hoverPause: true,
      },
      partyMemberDevelopmentOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["年入党人数(10年)", "总人数"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: [
              "1950",
              "1960",
              "1970",
              "1980",
              "1990",
              "2000",
              "2010",
              "2022",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "年入党人数(10年)",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210, 50],
          },
          {
            name: "总人数",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 252, 353, 487, 577, 807, 1017, 1067],
          },
        ],
      },
    };
  },
  methods: {
    /** 党员发展折线图*/
    queryPartyMemberDevelopmentResponse() {
      queryPartyMemberDevelopmentResponse()
        .then((res) => {
          this.partyMemberDevelopmentOption.xAxis[0].data = res.data.yearList;
          this.partyMemberDevelopmentOption.series[0].data =
            res.data.yearNoList;
          this.partyMemberDevelopmentOption.series[1].data =
            res.data.yearTotalNoList;
          this.$nextTick(() => {
            var chartDom = this.$refs.partyMemberDevelopment;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts
              .init(chartDom, "dark")
              .setOption(this.partyMemberDevelopmentOption);
          });
        })
        .catch((err) => {
          this.$nextTick(() => {
            var chartDom = this.$refs.partyMemberDevelopment;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts
              .init(chartDom, "dark")
              .setOption(this.partyMemberDevelopmentOption);
          });
        });
    },
    /**男女比例饼图 */
    querySexRatioEchart() {
      querySexRatio()
        .then((res) => {
          this.maleOption.series[0].data = [
            {
              name: "男",
              value: res.data.maleRatio,
            },
            {
              name: "女",
              value: res.data.femaleRatio,
            },
          ];
          this.$nextTick(() => {
            var chartDom = this.$refs.maleChart;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom, "dark").setOption(this.maleOption);
          });
        })
        .catch((err) => {});
    },
    /**年份统计人数统计 */
    annualPopulationStatistics() {
      queryAnnualPopulationStatistics()
        .then((res) => {
          this.yearStatisticsPieData.series[0].data = res.data.list;
          this.$nextTick(() => {
            var chartDom = this.$refs.annualPopulationChart;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts
              .init(chartDom, "dark")
              .setOption(this.yearStatisticsPieData);
          });
        })
        .catch((err) => {
          this.$nextTick(() => {
            var chartDom = this.$refs.annualPopulationChart;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts
              .init(chartDom, "dark")
              .setOption(this.yearStatisticsPieData);
          });
        });
    },
    /**党员学历统计 */
    educationChart() {
      queryPartyEducationalStatistics()
        .then((res) => {
          this.educationChartData.yAxis.data =
            res.data.educationNameList.reverse();
          this.educationChartData.series[1].data =
            res.data.maleNoList.reverse();
          this.educationChartData.series[0].data =
            res.data.femaleList.reverse();
          this.educationChartData = { ...this.educationChartData };
          this.$nextTick(() => {
            var chartDom = this.$refs.educationChart;

            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom, "dark").setOption(this.educationChartData);
          });
        })
        .catch((err) => {
          this.$nextTick(() => {
            var chartDom = this.$refs.educationChart;
            // 销毁
            echarts.init(chartDom, "dark").dispose();
            echarts.init(chartDom, "dark").setOption(this.educationChartData);
          });
        });
    },
    /**查询党组织信息 */
    queryPartyBranchStatistics() {
      queryPartyBranchStatistics()
        .then((res) => {
          this.parterRank = { ...this.parterRank };
          // 处理数据为name,value
          for (var i in res.data.partyBranchStatisList) {
            this.parterRank.data.push({});
            this.$set(
              this.parterRank.data[i],
              "name",
              res.data.partyBranchStatisList[i].partyOrganization
            );
            this.$set(
              this.parterRank.data[i],
              "value",
              res.data.partyBranchStatisList[i].sum
            );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPartyBasicInformation() {
      const str = "江苏省张家港市塘桥镇金村村";
      let that = this;
      getPartyBasicInformation(str)
        .then((res) => {
          that.partyBaseInformation = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    setup() {
      const map = shallowRef(null);
      return {
        map,
      };
    },
    initMap() {
      let that = this;
      window._AMapSecurityConfig = {
        serviceHost: "http://map.zhuyaowei.cn:888/_AMapService",
      };
      AMapLoader.load({
        key: "d52af739d3742f69fdc924320b294780", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          that.map = new AMap.Map("center_map", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 16, // 初始化地图级别
            center: [120.710779, 31.785218], // 初始化地图中心点位置
            mapStyle: "amap://styles/bca1f666a4491ac9834b6c8d6b19ca4f",
          });
          that.getAllPartyBranchList();
          AMap.plugin("AMap.ToolBar", function () {
            //异步加载插件
            var toolbar = new AMap.ToolBar();
            that.map.addControl(toolbar);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getAllPartyBranchList() {
      let that = this;
      getAllPartyBranchList()
        .then((res) => {
          let data = res.data;
          var icon = new AMap.Icon({
            size: new AMap.Size(46, 28), // 图标尺寸
            image:
              "https://h2-shanghai-blog.oss-cn-shanghai.aliyuncs.com/srsb/image/20220409/025c9b5162b540b4a11248a5423b6f58.webp", // Icon的图像
            // 图标所用图片大小
            imageSize: new AMap.Size(46, 28),
          });
          for (var i in data) {
            // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
              position: new AMap.LngLat(data[i].longitude, data[i].latitude),
              title: data[i].name,
              icon: icon,
              data: data[i],
            });
            that.map.add(marker);
            marker.on("click", function (e) {});
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
@import "../../css/index.css";
.w23 {
  width: 23%;
}
/* 左标题对齐 */
.m-align-left {
  margin-left: 12.5%;
}
/*顶部标题对齐 */
.m-align-top {
  margin-top: 10%;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.map-size {
  width: 910px;
}
.w23 {
  width: 465px;
}
.top-pos {
  left: 49px;
  top: 565px;
}
.map-pos {
  left: 530px;
  top: 425px;
}
.mp3-size {
  width: 450px;
}
.mp3-pos {
  left: 1460px;
  top: 111px;
}
.age-size {
  width: 441.6px;
  height: 300px;
}
.age-pos {
  top: 475px;
  left: 52px;
}
.p2_rS {
  width: 100%;
  height: 100%;
  border: #1a3f72 solid 2px;
  background: rgba(41, 85, 252, 0.2);
  position: relative;
  box-sizing: border-box;
  margin-bottom: 25px;
}

.rS-size {
  width: 466px;
  height: 435px;
}
.rS-pos {
  left: 49px;
  top: 112px;
}
.pie-size {
  width: 504px;
  height: 300px;
}
.pie-pos {
  left: 935px;
  top: 113px;
}
.pie_ps {
  width: 100%;
  height: 100%;
  border: #1a3f72 solid 2px;
  background: rgba(41, 85, 252, 0.2);
  position: relative;
  box-sizing: border-box;
  margin-bottom: 25px;
}
.male-size {
  width: 380px;
  height: 300px;
}

.male-pos {
  left: 532px;
  top: 113px;
}
.male_ps {
  width: 100%;
  height: 100%;
  border: #1a3f72 solid 2px;
  background: rgba(41, 85, 252, 0.2);
  position: relative;
  box-sizing: border-box;
  margin-bottom: 25px;
}
.left_top {
  height: 461px;
}
.back {
  border: #1a3f72 solid 2px;
  background: rgba(41, 85, 252, 0.2);
}
.font_1 {
  font-size: 20px;
  color: #7ba1d2;
  display: inline-block;
  margin-top: 50px;
  width: 100%;
  text-indent: 35px;
}
</style>